<template>
    <div class="main-content">
        <echartsLayout :formState='formState' :dataListState='dataListState' :eCharts1State='eCharts1State' :eCharts2State='eCharts2State' 
        :eCharts3State='eCharts3State' :chartsListState='chartsListState' :tableState='tableState'>
            <div slot="form">
                <el-form :model="query" ref="query" label-width="70px" label-position="right">
                    <el-row :gutter="41">
                        <el-col :span="7">
                            <el-form-item label="使用日期" prop="useDate">
                               <el-date-picker v-model="query.useDate" :editable="false" :clearable="false" type="date" placeholder="请选择" style="width:100%" :picker-options="pickerOptions1"></el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <!-- <el-form-item label="模块名称" prop="modulesName">
                                <el-input v-model="query.modulesName" placeholder="请输入" style="width:100%"></el-input>
                            </el-form-item> -->
                            <el-form-item label="模块名称">
                                <el-select v-model="query.modulesName" placeholder="请选择模块名称"
                                style="width:100%">
                                    <el-option v-for="(item,index) in modulesNameArr" 
                                    :key="index" :label="item.moduleName" :value="item.moduleValue"> 
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="3" :offset="7">
                            <div class="top-line">
                                <el-button type="primary" class="btn-common" @click="onSubmit">查询</el-button>
                            </div>
                        </el-col>
                    </el-row> 
                </el-form>
            </div> 
            <div slot="eCharts2" >
                <div class="charts-title">模块分时活跃</div>
                <div class="charts-display" v-loading='chartLoading'>
                    <trendChart width='100%' height='100%' id="lineChart" :option='lineChartOption'></trendChart>
                </div>
            </div>
            <div slot="table" >
                <div class="table-title">
                    <exportExcel @ee="ExportFile"></exportExcel>
                </div> 
                <el-table :data="tableData" border v-loading="loading" style="width: 100%">
                    <el-table-column label="模块名称" align="center">
                        <template scope="scope">
                            <span>{{scope.row.moduleName | isNull}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="00~01" align="center">
                        <template scope="scope">
                            <span>{{scope.row.hour1| isNull}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="01~02" align="center">
                        <template scope="scope">
                            <span>{{scope.row.hour2 | isNull}}</span>
                        </template>
                    </el-table-column>
    
                    <el-table-column label="02~03" align="center">
                        <template scope="scope">
                            <span>{{scope.row.hour3 | isNull}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="03~04" align="center">
                        <template scope="scope">
                            <span>{{scope.row.hour4 | isNull}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="04~05" align="center">
                        <template scope="scope">
                           <span>{{scope.row.hour5| isNull}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="05~06" align="center">
                        <template scope="scope">
                             <span>{{scope.row.hour6 | isNull}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="06~07" align="center">
                        <template scope="scope">
                            <span>{{scope.row.hour7 | isNull}}</span>
                        </template>
                    </el-table-column>
                 
                    <el-table-column label="07~08" align="center">
                        <template scope="scope">
                            <span>{{scope.row.hour8| isNull}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="08~09" align="center">
                        <template scope="scope">
                            <span>{{scope.row.hour9 | isNull}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="09~10" align="center">
                        <template scope="scope">
                            <span>{{scope.row.hour10 | isNull}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="10~11" align="center">
                        <template scope="scope">
                            <span>{{scope.row.hour11 | isNull}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="11~12" align="center">
                        <template scope="scope">
                           <span>{{scope.row.hour12 | isNull}}</span>
                        </template>
                    </el-table-column>
    
                    <el-table-column label="12~13" align="center">
                        <template scope="scope">
                            <span>{{scope.row.hour13 | isNull}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="13~14" align="center">
                        <template scope="scope">
                            <span>{{scope.row.hour14 | isNull}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="14~15" align="center">
                        <template scope="scope">
                            <span>{{scope.row.hour15 | isNull}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="15~16" align="center">
                        <template scope="scope">
                            <span>{{scope.row.hour16 | isNull}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="16~17" align="center">
                        <template scope="scope">
                            <span>{{scope.row.hour17 | isNull}}</span>
                        </template>
                    </el-table-column>
                 
                    <el-table-column label="17~18" align="center">
                        <template scope="scope">
                            <span>{{scope.row.hour18 | isNull}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="18~19" align="center">
                        <template scope="scope">
                            <span>{{scope.row.hour19 | isNull}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="19~20" align="center">
                        <template scope="scope">
                            <span>{{scope.row.hour20 | isNull}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="20~21" align="center">
                        <template scope="scope">
                            <span>{{scope.row.hour21 | isNull}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="21~22" align="center">
                        <template scope="scope">
                            <span>{{scope.row.hour22 | isNull}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="22~23" align="center">
                        <template scope="scope">
                            <span>{{scope.row.hour23 | isNull}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="23~24" align="center">
                        <template scope="scope">
                            <span>{{scope.row.hour24 | isNull}}</span>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination-container">
                    <el-pagination
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="pageQuery.total"
                        :current-page.sync="pageQuery.currentpage"
                        :page-sizes="config.pageSizes"
                        :page-size="config.pageSize"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange">
                    </el-pagination>
                </div>
            </div>
        </echartsLayout>
    </div>
</template>

<script>
    import moment from 'moment';
    import echartsLayout from 'components/TableLayout/echartsLayout'; 
    import trendChart from 'components/Charts/trendChart';
    import exportExcel from 'components/ExportExcel/index'; 
    import { mapState, mapActions } from 'vuex';
    import { ListModules, findModuleActiveSumByHour, findModuleActiveByHour} from 'api/pingtaifenxi';
    export default{
        name: 'modulesTime',
        components: {echartsLayout, trendChart, exportExcel},
        data() {
            return {
                chartLoading: false,
                loading: false,
                formState: false,
                dataListState: true,
                eCharts1State: true,
                eCharts2State: false,
                eCharts3State: true,
                chartsListState: true,
                tableState: false,
                query: {
                    useDate: new Date(),
                    modulesName: ''
                },
                modulesNameArr: [],
                tableData: [],
                pageQuery: {
                    currentpage: 1,
                    total: 0
                },
                lineChartOption: null,
                pickerOptions1: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    }
                },
                jsonStr: null,
                filterList: null
            }
        },
        computed: {
            ...mapState({
                config: state => state.config.table
            })
        },
        created() {
            this.modulesNameArrs();
            this.getTableList();
            this.getChartData();
        },
        methods: {
            ...mapActions(['ChangePageSize']),
            handleSizeChange(val) {
                this.pageQuery.currentpage = 1;
                this.ChangePageSize(val);
                this.getTableList();
            },
            handleCurrentChange(val) {
                this.pageQuery.currentpage = val;
                this.getTableList();
            },
            modulesNameArrs() {
                ListModules().then(res => {
                    this.modulesNameArr=res.data.content;
                    this.modulesNameArr.unshift({moduleName: '请选择', moduleValue: ''})
                })
            },
            onSubmit() {
             
                this.pageQuery.currentpage = 1;
                this.getTableList();
                this.getChartData();
            },
          
            getTableList() {
                this.loading = true;
                let date=this.query.useDate==''?'':moment(this.query.useDate).format('YYYY-MM-DD'),
                    moduleId=this.query.modulesName,
                    page=this.pageQuery.currentpage,
                    pageSize = this.config.pageSize;
                findModuleActiveByHour(page, pageSize, date, moduleId).then(res => {
                    this.loading = false;
                    this.tableData = res.data.content.list;
                    this.pageQuery.total = res.data.content.pagination?res.data.content.pagination.total:0;
                }).catch(() => {
                    this.loading = false;
                    this.tableData = [];
                });
            },
            getChartData() {
                this.chartLoading = true;
                let date=this.query.useDate==''?'':moment(this.query.useDate).format('YYYY-MM-DD'),
                    moduleId=this.query.modulesName;
                findModuleActiveSumByHour(date, moduleId).then(res => {
                    this.chartLoading = false;
                    let yDataList=[];
                    for (let value of Object.values(res.data.content[0])) {
                        yDataList.push(value)
                    }
                    this.lineChartOption = {
                        color: ['#0D9FE1'],
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            icon: 'rect',
                            data: ['模块分时活跃']  
                        },
                        calculable: true,
                        xAxis: [
                            {
                                type: 'category',
                                boundaryGap: false,
                                data: ['00~01', '01~02', '02~03', '03~04', '04~05', '05~06', '06~07', '07~08', '08~09', '09~10', '10~11', '11~12', '12~13', '13~14', '14~15', '15~16', '16~17', '17~18', '18~19', '19~20', '20~21', '21~22', '22~23', '23~24']
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value'
                            }
                        ],
                        series: 
                        [
                            {
                                name: '模块分时活跃',
                                type: 'line',
                                stack: '总量',
                                data: yDataList 
                            }
                        ]
                    };    

                }).catch(() => {
                    this.chartLoading = false;
                });
             
            },
            ExportFile() {
                let date=this.query.useDate==''?'':moment(this.query.useDate).format('YYYY-MM-DD'),
                    moduleId=this.query.modulesName;
                window.location.href = `${LOCAL_API.scy}/report/user/outExcelModuleByHour?date=${date}&moduleId=${moduleId}`
            }

        }
    }
</script>
<style lang="scss" scoped>
    .main-content {
        position: relative;
        $bgcolor: #fff;
    }
</style>                     